<template>

  <div class="box">

    <h1>
      关于后台介绍
    </h1>
    <h3>数据记录存储的一个后台管理程序,帮助大家记录平常沟通信息,间接的和飞书发起关联,飞书词典可加入相关人员信息
      <br>然后根据地址栏快速跳转用户详情信息
      <br>比如http://localhost:9527/#/table/complex-table?uid=xxx
      <br>
      目前登录账号admin
      密码 123456
      功能正在陆续更新中。。。。
    </h3>

    <div class="box_warp">

      <!-- <tarnsition name="animate__animated animate__bounce"
enter-active-class='animate__animated animate__bounce'
leave-active-class='animate__animated animate__bounce'
 appear
 >
  222222222
</tarnsition> -->

      <div>
        <h1 class="animate__animated animate__bounce animate__slideInUp">An TEXT </h1>
        <img src="http://lc-RanMoNzS.cn-n1.lcfile.com/d586c7558d9e92caf0b8.jpg" alt="">
      </div>
      <div>

        <h1 class="animate__animated animate__bounce animate__slideInUp">An TEXT </h1>
        <img src="http://lc-RanMoNzS.cn-n1.lcfile.com/d586c7558d9e92caf0b8.jpg" alt="">

      </div>
      <div>

        <h1 class="animate__animated animate__bounce animate__slideInUp">An TEXT </h1>
        <img src="http://lc-RanMoNzS.cn-n1.lcfile.com/d586c7558d9e92caf0b8.jpg" alt="">

      </div>
      <div>

        <h1 class="animate__animated animate__bounce animate__slideInUp">An TEXT </h1>
        <img src="http://lc-RanMoNzS.cn-n1.lcfile.com/d586c7558d9e92caf0b8.jpg" alt="">

      </div>
      <div>

        <h1 class="animate__animated animate__bounce animate__slideInUp">An TEXT </h1>
        <img src="http://lc-RanMoNzS.cn-n1.lcfile.com/d586c7558d9e92caf0b8.jpg" alt="">

      </div>
      <!-- <h1 class="animate__animated animate__bounce animate__lightSpeedInLeft">An TEXT </h1>
<h1 class="animate__animated animate__bounce animate__lightSpeedOutRight">An TEXT </h1>
<h1 class="animate__animated animate__bounce animate__fadeOutUp">TEXT </h1> -->

    </div>

  </div>

</template>

<script>
export default {

}
</script>

<style>

.animate__animated{
  /* margin-top:1000px */
}

.box_warp{
  display:flex;
  justify-content:space-evenly;
   align-items:center;
}

.box_warp >div>img{
  width: 300px;
  height: 300px;
  display:inline-block;
  transition: all .3s ease-in 0s;
}
.box_warp >div>img:hover{
  transform: scale(1.2);
  /* width: 400px;
  height: 400px; */
  display:inline-block;
  transition: all .3s ease-in 0s;
}
</style>

<!--
<template>
  <div>
    <input type="text" v-model="keyword" placeholder="请输入关键字">
    <ul v-for="item in filteredItems"  :key="item.id">
      <li  v-html="highlightKeyword(item.remark_three)"></li>
      <li  v-html="highlightKeyword(item.remark_two)"></li>
      <li  v-html="highlightKeyword(item.remark_one)"></li>
      <li  v-html="highlightKeyword(item.title)"></li>
    </ul>
  </div>
</template>

<script>
  import { tabList } from '@/api/article'
export default {
  data() {
    return {
      listQuery:'',
      list:[],
      keyword: '',
      items: [
        { id: 1, text: 'Vue.js is a JavaScript framework for building user interfaces.' },
        { id: 2, text: 'It provides reactive data binding and composable view components.' },
        { id: 3, text: 'Vue.js is easy to learn and has a vibrant ecosystem.' }
      ]
    };
  },
  computed: {
    filteredItems() {
      if (this.keyword === '') {
        return this.items;
      } else {
        const regex = new RegExp(this.keyword, 'gi');
        console.log('this.keyword',this.keyword)
        console.log('this.regex',regex)
        return this.items.filter(item => item.remark_one.match(regex)||item.title.match(regex));
      }
    }
  },
  mounted(){
    this.getList()
  },
  methods: {
    getList() {
      // this.listLoading = true
      tabList(this.listQuery).then(response => {
        console.log(response, 'response')
        this.items = response.data
        console.log(this.items, 'this.items222222222')
        //  console.log(this.listQuery,'this.listQuery')
        this.total = response.total
        // Just to simulate the time of the request
        // setTimeout(() => {
        //   this.listLoading = false
        // }, 1.5 * 1000)
      })
    },
    highlightKeyword(text) {
      if (this.keyword === '') {
        return text;
      } else {
        const regex = new RegExp(this.keyword, 'gi');
        return text.replace(regex, '<span class="highlight">$&</span>');
      }
    }
  }
};
</script>

<style>
.highlight {
  background-color: yellow;
}
</style> -->
